<template>
  <div class="category">
    <div class="img-wrapper">
      <img src="https://p3-sign.toutiaoimg.com/tos-cn-i-axegupay5k/e62fecf27b6046d0a07b2889ae6f4f7f~tplv-tt-large.image?_iz=30575&lk3s=06827d14&x-expires=1717557855&x-signature=JHFdAX6jm8YaQQYNQlxNqQBtuhI%3D"
           alt="">
    </div>

    <div class="category-btn-wrapper">
      <div class="btn" v-for="(btn,index) of btns"
            :class="{'active': index == btnIndex}"
            @click="handleClick(index)">{{ btn.text }}
      </div>
    </div>

    <div class="content-wrapper">
      <div class="item" v-for="t of news">
        <div class="left">
          <img src="t.thumbnail_pic_s" alt="">
        </div>
        <div class="right">
          <h1 class="title">{{ t.title }}</h1>
            <div class="text-wrapper">
              <span class="category-text">{{ t.category }}</span>
              <span class="date-text">{{ t.date }}</span>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "category_news",
  data() {
    return{
      news: [],
      btns: [
        {
          text: '体育',
          paramText: 'tiyu'
        },
        {
          text: '国内',
          paramText: 'guonei'
        },
        {
          text: '国际',
          paramText: 'guoji'
        }
      ],
      btnIndex: 0
    }
  },
  methods: {
    handleClick(index) {
      if (this.btnIndex != index){
        this.btnIndex = index;
        this._initNews()
      }
    },
    _initNews() {
      axios.get('/juheNews',{
        params: {
          key: "3ac14fd1e635aef5947e7430ece1b84f",
          type: this.btns[this.btnIndex].paramText
        }
      }).then(res => {
        if (res.data.error_code == 0) {
          this.news = res.data.result.data;
          console.log(this.news)
        } else {
          alert('请求失败')
        }
      })
    },
    created() {
      this._initNews()
    }
  }
}
</script>

<style scoped lang="stylus">
.category
  .img-wrapper
    width 100%
    height 200px

    img
      width 100%
      height 100%

  .category-btn-wrapper
    display flex
    flex-wrap wrap
    justify-content center

    .btn
      height 22px
      padding 0 6px
      margin 5px 10px
      line-height 22px
      border 1px solid #ff0036
      border-radius 10px
      color #ff0036

    .active
      background-color #ff0036
      color #fff

  .content-wrapper
    margin-top 20px

    .item
      display flex
      width 100%
      height 70px
      padding 4px 0
      border-bottom 1px dotted #2d3a4b

      .left
        width 90px
        height 70px

        img
          width 90px
          height 70px

      .right
        display flex
        flex-wrap wrap
        align-content space-between
        box-sizing border-box
        padding-left 15px
        padding-bottom 15px

        .text-wrapper
          margin-left 20px
</style>